//
// $(function(){
//
//     initMap();
//
//
//
//
//
//
//
//
// })
// //地图界面高度设置
//
//
//
// //加载地图
// function initMap(){
//     var map = L.map('map_div', {
//         center: [39.830660058696104, 116.92866163503169],
//         zoom: 10,
//         // crs: L.supermap.CRS.TianDiTu_Mercator
//         crs: L.CRS.EPSG3857
//     });
//
//     // 创建自定义图标
//     var customIcon = L.icon({
//         iconUrl: 'path/to/icon.png',
//         iconSize: [16, 16], // 图标的大小
//         iconAnchor: [16, 32], // 图标锚点位置
//         popupAnchor: [0, -32] // 弹出框相对于图标的偏移量
//     });
//     // // 设置标记点的其他样式
//     // marker.bindPopup("这是一个自定义标记点").openPopup();
//
//
//     // 添加天地图图层
//     //url="http://localhost:8090/iserver/services/map-baidu/rest/maps/normal"
//     //矢量底图
//     url="http://localhost:8090/iserver/services/map-tianditu-3/rest/maps/%E7%9F%A2%E9%87%8F%E5%BA%95%E5%9B%BE_%E5%A2%A8%E5%8D%A1%E6%89%98"
//     new L.supermap.TiledMapLayer(url).addTo(map);
//     //地图注解
//     url="http://localhost:8090/iserver/services/map-tianditu-3/rest/maps/%E7%9F%A2%E9%87%8F%E4%B8%AD%E6%96%87%E6%B3%A8%E8%AE%B0_%E5%A2%A8%E5%8D%A1%E6%89%98"
//     new L.supermap.TiledMapLayer(url).addTo(map);
//     while(true)
//     {
//         fetch('/points')
//             .then(response => response.json())
//             .then(data => {
//                 // 清除现有的标记
//                 map.eachLayer(function (layer) {
//                     if (layer instanceof L.CircleMarker) {
//                         map.removeLayer(layer);
//                     }
//                 });
//
//                 // 添加新的标记
//                 data.forEach(user => {
//                     switch (user.status) {
//                         case 1:
//                             color = 'green'; // 在线状态1为绿色
//                             break;
//                         case 2:
//                             color = 'red';   // 在线状态2为红色
//                             break;
//                         case 3:
//                             color = 'blue';  // 在线状态3为蓝色
//                             break;
//                         default:
//                             color = 'gray';  // 默认颜色，可以设置为其他颜色（如灰色）用于未定义的状态
//                             break;
//                     }
//                     //（lon-0.01185，lat-0.00328）
//                     const marker = L.circleMarker([user.latitude, user.longitude], {color}).addTo(map);
//                     marker.bindPopup(`用户ID: ${user.userId}<br>姓名: ${user.name}<br>手机号: ${user.phone}<br>在线状态: ${user.status}`);
//                 });
//             });
//
//     }
//
//     // 每20秒刷新用户位置
//
//
// }
//
// $(function() {
//     initMap();
//
// });
//
// function initMap() {
//     var map = L.map('map_div', {
//         center: [39.830660058696104, 116.92866163503169],
//         zoom: 10,
//         crs: L.CRS.EPSG3857
//     });
//
//     // 创建自定义图标
//     var customIcon = L.icon({
//         iconUrl: 'path/to/icon.png',
//         iconSize: [16, 16], // 图标的大小
//         iconAnchor: [8, 16], // 图标锚点位置
//         popupAnchor: [0, -16] // 弹出框相对于图标的偏移量
//     });
//
//     // 添加天地图图层
//     url = "http://localhost:8090/iserver/services/map-tianditu-3/rest/maps/%E7%9F%A2%E9%87%8F%E5%BA%95%E5%9B%BE_%E5%A2%A8%E5%8D%A1%E6%89%98";
//     new L.supermap.TiledMapLayer(url).addTo(map);
//
//     url = "http://localhost:8090/iserver/services/map-tianditu-3/rest/maps/%E7%9F%A2%E9%87%8F%E4%B8%AD%E6%96%87%E6%B3%A8%E8%AE%B0_%E5%A2%A8%E5%8D%A1%E6%89%98";
//     new L.supermap.TiledMapLayer(url).addTo(map);
//
//     // 每20秒刷新用户位置
//     setInterval(fetchAndUpdateMarkers, 30000); // 每3秒执行一次
// }
//
// async function fetchAndUpdateMarkers() {
//     try {
//         const response = await fetch('/points');
//         const data = await response.json();
//
//         // 清除现有的标记
//         const map = L.map('map_div');
//         map.eachLayer(function (layer) {
//             if (layer instanceof L.CircleMarker) {
//                 map.removeLayer(layer);
//             }
//         });
//
//         // 添加新的标记
//         data.forEach(user => {
//             switch (user.status) {
//                 case 1:
//                     color = 'green'; // 在线状态1为绿色
//                     break;
//                 case 2:
//                     color = 'red';   // 在线状态2为红色
//                     break;
//                 case 3:
//                     color = 'blue';  // 在线状态3为蓝色
//                     break;
//                 default:
//                     color = 'gray';  // 默认颜色，可以设置为其他颜色（如灰色）用于未定义的状态
//                     break;
//             }
//             //（lon-0.01185，lat-0.00328）
//             const marker = L.circleMarker([user.latitude, user.longitude], {color}).addTo(map);
//             marker.bindPopup(`用户ID: ${user.userId}<br>姓名: ${user.name}<br>手机号: ${user.phone}<br>在线状态: ${user.status}`);
//         });
//
//     } catch (error) {
//         console.error('Error fetching data:', error);
//     }
// }

var map; // 将图层定义为全局变量

$(function() {
    initMap();
    setInterval(fetchAndUpdateMarkers, 5000); // 适当调整时间
});

function initMap() {
    map = L.map('map_div', {
        center: [39.830660058696104, 116.92866163503169],
        zoom: 10,
        crs: L.CRS.EPSG3857
    });

    // 添加天地图图层
    url = "http://localhost:8090/iserver/services/map-tianditu-3/rest/maps/%E7%9F%A2%E9%87%8F%E5%BA%95%E5%9B%BE_%E5%A2%A8%E5%8D%A1%E6%89%98";
    new L.supermap.TiledMapLayer(url).addTo(map);

    url = "http://localhost:8090/iserver/services/map-tianditu-3/rest/maps/%E7%9F%A2%E9%87%8F%E4%B8%AD%E6%96%87%E6%B3%A8%E8%AE%B0_%E5%A2%A8%E5%8D%A1%E6%89%98";
    new L.supermap.TiledMapLayer(url).addTo(map);

    // 每20秒刷新用户位置
    fetchAndUpdateMarkers();

}

async function fetchAndUpdateMarkers() {
    try {
        const response = await fetch('/points');
        const data = await response.json();

        //清除现有的标记
        map.eachLayer(function (layer) {
            if (layer instanceof L.CircleMarker) {
                map.removeLayer(layer);
            }
        });

        // 添加新的标记
        data.forEach(user => {
            let color; // 确保在此声明 color
            switch (user.status) {
                case 1:
                    color = 'green';
                    break;
                case 2:
                    color = 'red';
                    break;
                case 3:
                    color = 'blue';
                    break;
                default:
                    color = 'gray';
                    break;
            }
            const marker = L.circleMarker([user.latitude, user.longitude], { color }).addTo(map);
            marker.bindPopup(`用户ID: ${user.userId}<br>姓名: ${user.name}<br>手机号: ${user.phone}<br>在线状态: ${user.status}`);
        });
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}